<template>
  <div class="inform">
    <div>
      <span class="infor-h">区域计算方案设置区-</span><span class="infor-tit">杨家横区域</span>
    </div>
    <!-- <div class="right-box-nav">
      <div
        :class="[navId == item.id ? 'show' : '']"
        v-for="item in nav_list"
        :key="item.id"
        @click="getNav(item.id)"
      >
        {{ item.name }}
      </div>
    </div> -->
    <!-- <div class="inform-form">
      <div><span class="be-tit">洪水预报方案：</span><span class="title">杨家横单元</span></div>
      <div class="model">
        <span class="be-tit">模型名称：</span><span class="title">新安江</span>
      </div>
      <div>
        <span class="be-tit">模型参数：</span><span>22001新安江参数</span>
        <span class="btn-canshu">查看参数详情</span>
      </div>
    </div> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="洪水预报方案" name="1">
        <div class="unit-box">
          <div class="unit-row">
            <span class="unit-row-font">洪水预报方案：</span>
            <span class="unit-row-name">杨家横单元</span>
          </div>
          <div class="unit-row">
            <span class="unit-row-font">模型名称：</span>
            <span class="unit-row-name">新安江</span>
          </div>
          <div class="unit-row">
            <span class="unit-row-font">模型参数：</span>
            <span class="unit-row-param">2210001新安江参数</span>
            <span class="unit-row-btn">查看参数详情</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="河段" name="2">
        <div class="unit-box">
          <div class="unit-row">
            <span class="unit-row-font">河段名称：</span>
            <span class="unit-row-name">杨家横盘龙河段</span>
          </div>
          <div class="unit-row">
            <span class="unit-row-font">模型名称：</span>
            <span class="unit-row-name">新安江</span>
          </div>
          <div class="unit-row">
            <span class="unit-row-font">模型参数：</span>
            <span class="unit-row-param">2210001新安江参数</span>
            <span class="unit-row-btn">查看参数详情</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="水工程" name="3">
        <div class="unit-box">
          <div class="unit-row">
            <span class="unit-row-font">水库名称：</span>
            <span class="unit-row-name">盘龙水库</span>
          </div>
          <div class="unit-row">
            <span class="unit-row-font">模型名称：</span>
            <span class="unit-row-name">优化调度</span>
          </div>
          <div class="unit-row">
            <span class="unit-row-font">模型参数：</span>
            <span class="unit-row-param">2210001新安江参数</span>
            <span class="unit-row-btn">查看参数详情</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
const activeName = ref('1')
let navId = ref(1)
const getNav = (e) => {
  navId.value = e
}
</script>

<style lang="less" scoped>
.inform {
  .infor-h {
    font-size: var(--content-fontsize);
    font-weight: 500;
  }
  .infor-tit {
    color: #409eff;
    font-size: var(--content-fontsize);
  }
  :deep(.el-tabs) {
    margin-top: 15px;
    margin-left: 30px;
    font-size: var(--content-fontsize);
  }
  .unit-box {
    margin-top: 15px;
    margin-left: 30px;
    .unit-row {
      height: 50px;
      .unit-row-font {
        font-size: var(--header-fontsize);
        color: #797979;
      }
      .unit-row-name {
        font-size: var(--content-fontsize);
        font-weight: 600;
      }
      .unit-row-param {
        color: #797979;
        margin-right: 80px;
      }
      .unit-row-btn {
        color: #409eff;
        border-bottom: 1px solid #409eff;
        cursor: pointer;
      }
    }
  }
  .right-box-nav {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    margin: 20px 0;
  }

  .show {
    color: blue;
    text-decoration: underline;
  }

  .inform-form {
    margin-left: 20px;

    .be-tit {
      letter-spacing: 5px;
    }

    .title {
      font-size: 20px;
      font-weight: 500;
    }

    .model {
      margin: 20px 0;

      .be-tit {
        letter-spacing: 5px;
      }

      .title {
        font-size: 20px;
        font-weight: 500;
      }
    }

    .btn-canshu {
      margin-left: 50px;
      color: blue;
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
</style>
